<template>
  <div class="pagination-wrap">
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :size="size"
      v-model:current-page="current"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20, 50]"
      @current-change="currentChange"
      @size-change="sizeChange"
      @prev-click="handlePrev"
      @next-click="handleNext"
    />
  </div>
</template>

<script setup>
defineProps({
  total: {
    type: Number,
    require: true
  },
  size: {
    type: String,
    default: 'default',
    require: false
  }
})
const emit = defineEmits(['query'])
const current = ref(1)
const pageSize = ref(10)

onMounted(() => {
  query()
})

const query = () => {
  emit('query', current.value, pageSize.value)
}

const resetQuery = () => {
  current.value = 1
  pageSize.value = 10
  emit('query', current.value, pageSize.value)
}

const currentChange = (value) => {
  current.value = value
  query()
}
const sizeChange = (value) => {
  pageSize.value = value
  query()
}
const handlePrev = (value) => {
  current.value = value
  query()
}
const handleNext = (value) => {
  current.value = value
  query()
}

defineExpose({ query, resetQuery })
</script>

<style lang="scss" scoped>
.pagination-wrap {
  float: right;
  padding-top: 20px;
}
</style>
